<!DOCTYPE html>

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->

<html class="not-ie" lang="en">
    <!--<![endif]-->

    <head>
        <meta charset="utf-8">
        <meta name="description" content="description" />
        <meta name="keywords" content="keywords"/>
        <meta name="author" content="BRKOR" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>Resume Timeline</title>

    <!-- google web font-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>

        <!-- style sheets-->
        <link rel="stylesheet" media="all" href="{{URL::to('/assets')}}/css/bootstrap.css" type="text/css"/>
        <link rel="stylesheet" media="all" href="{{URL::to('/assets')}}/css/custom.css" type="text/css"/>

        <!-- main jquery libraries / others are at the bottom-->
        <script src="{{URL::to('/assets')}}/js/jquery.min.js" type="text/javascript"></script>
        <script src="{{URL::to('/assets')}}/js/modernizr.js" type="text/javascript"></script>
        <script src="{{URL::to('/assets')}}/js/helper.js" type="text/javascript"></script>

    </head>
    <body>

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            {{$content}}
        </div>
    </div>
        <!-- Java Script -->
        <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{URL::to('/assets')}}/js/bootstrap.min.js"></script>
    <script src="{{URL::to('/assets')}}/js/bootstrap-progressbar.js"></script>
    <script src="{{URL::to('/assets')}}/js/spy.js"></script>
    <script src="{{URL::to('/assets')}}/js/scripts.js"></script>
    <script src=".{{URL::to('/assets')}}/js/jquery.Jcrop.js"></script>
    <!-- Charts -->
    <script src="{{URL::to('/assets')}}/js/jquery.easypiechart.js"></script>
    <script src="{{URL::to('/assets')}}/js/chart.js"></script>
    
    <link rel="stylesheet" href="{{URL::to('/assets')}}/css/main.css" type="text/css" />
    <link rel="stylesheet" href="{{URL::to('/assets')}}/css/demos.css" type="text/css" />
    <link rel="stylesheet" href="{{URL::to('/assets')}}/css/jquery.Jcrop.css" type="text/css" />
    
    
<script type="text/javascript">
  function updateCoords(c)
  {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };

$(document).ready(function() {

	var jcrop_api;
	var cropBox = $('#cropbox');
        //$('#cropbox').Jcrop();
	/*$('#cropbox').Jcrop({
        },function(){
        jcrop_api = this;
		console.log(cropBox.width());
        jcrop_api.animateTo([0,0,cropBox.width()/2,cropBox.height()]);
        });*/

    $("#image-url").bind('paste', function(event) {
		setTimeout(function () { 
		jcrop_api.setImage($('#image-url').val());
		console.log(cropBox.width());
		jcrop_api.animateTo([0,0,cropBox.width()/2,cropBox.height()]);
			/*$('#cropbox').Jcrop({
			$('#cropbox').attr("src", $('#image-url').val());
				  aspectRatio: 1,
				  onSelect: updateCoords
			});*/
		}, 100);
    });
});

</script>
</body>
</html>